<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://www.zkingsoft.com" prefix="matrix"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content  " id="app">
		<div class="row">
		<input type="hidden" id="menId" value="${pcMenuRecord.menId}">
		<input type="hidden" id="menBeginTime" value="${pcMenuRecord.menBeginTime}">
		<input type="hidden" id="menEndTime" value="${pcMenuRecord.menEndTime}">
		<input type="hidden" id="menManMun" value="${pcMenuRecord.menManMun}">
		<div class="form-group ">
			<span  style="margin-left: 500px;font-size: 20px;padding-top: 100px;" >一周带量菜谱表</span>
		</div>
		<div class="form-group " style="font-size: 15px;">
			<span style="margin-left: 100px;">时间：${beginTime}&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;${endTime}</span>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="" >就餐人数：</span>
			<span class="">${pcMenuRecord.menManMun}</span>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="">单位：kg</span>
			<div style="float: right;margin-right: 100px;">
			<button onclick="exportMenu()" class=" btn btn-success btn-sm" id="btn_del" 
	           	 type="button" >导出菜谱表</button>
	           	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	           	 <button onclick="exportBuy()" class=" btn btn-success btn-sm" id="btn_del" 
	           	 type="button" >导出采购单</button>
	           	 </div>
		</div>
		
			<table class="table table-bordered ">
				<thead>
					<tr>
						<th>餐·点</th>
						<th colspan="2">星期一</th>
						<th colspan="2">星期二</th>
						<th colspan="2">星期三</th>
						<th colspan="2">星期四</th>
						<th colspan="2">星期五</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,rowsIndex) in rows">
						<td>{{item.meal}}</td>
						<template v-for="(inner, foodsIndex) in item.foods">
						<td @click="update(rowsIndex,foodsIndex,'food')"><template
								v-for="food in inner.food"> <b>{{food.menName}}</b>
							<br>
							</template></td>
						<td @click="update(rowsIndex,foodsIndex,'material')"><template
								v-for="material in inner.material">
							{{material.fodName}} &nbsp;{{material.weight}} <br>
							</template></td>
						</template>
						
					</tr>
				</tbody>
			</table>
		<div class="form-group " style="margin-left: 500px;font-size: 20px;" >
			<span class="" >一周菜谱中单人营养素供给量</span>
		</div>
			 <table class="table table-bordered ">
				<thead>
					<tr>
						<th>日期/标准</th>
						<th>能量(kcal)</th>
						<c:forEach var='e' items="${eleList}" varStatus="s">
						<c:if test="${e.micName eq '脂肪'}"><th>${e.micName}(占能量的比率%)</th></c:if>
						<c:if test="${e.micName ne '脂肪'}"><th>${e.micName}(${e.micUnit})</th></c:if>
						</c:forEach>
					</tr>
				</thead>
				 <tbody>
					<tr v-for="(item1,elesIndex) in elements">
						<td>{{item1.time}}</td>
						<td v-if="item1.energy > elements[5].energy">
							{{item1.energy}}&nbsp;↑ &nbsp;
							{{item1.energy/elements[5].energy | format}}&nbsp;%
							
						</td>
						<td v-else-if="item1.energy < elements[5].energy">
							{{item1.energy}}&nbsp;↓ &nbsp;
							{{item1.energy/elements[5].energy | format}}&nbsp;%
							
						</td>
						<td v-else>{{item1.energy}}</td>
						<template v-for="(inner1,miceListIndex) in item1.miceList">
						<td v-if="inner1.micAmount > elements[5].miceList[miceListIndex].micAmount 
								&&　elements[5].miceList[miceListIndex].micAmount > 0">
							{{inner1.micAmount}}&nbsp;↑&nbsp;
							{{inner1.micAmount/elements[5].miceList[miceListIndex].micAmount | format}}&nbsp;%
						</td>
						<td v-else-if="inner1.micAmount < elements[5].miceList[miceListIndex].micAmount 
								 &&　elements[5].miceList[miceListIndex].micAmount > 0">
							{{inner1.micAmount}}&nbsp;↓&nbsp;
							{{inner1.micAmount/elements[5].miceList[miceListIndex].micAmount | format}}&nbsp;%
						</td>
						<td v-else>{{inner1.micAmount}} </td>
						</template>
					</tr>
				</tbody>
			</table> 
			<span class="" >备注：以上营养素供给量，按食物用量的每100克计算</span>
		</div>
	</div>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MJsBase.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script type="text/javascript">
	var index = layer.load(1, {
		  shade: [0.6,'#fff'] //0.1透明度的白色背景
		});
		var app = new Vue({
			el : '#app',
			data : {rows:"",elements:""},
			filters : {
				format : function(value) {
					return Math.round(value * 100);
				}
			},
			methods:{
				update:
					function(rowsIndex,foodsIndex,type){
					if(type=='food'){
						if(app.rows[rowsIndex].foods[foodsIndex].food[0] != undefined){
							//获取pc_menu_detail表的men_id
							var id=app.rows[rowsIndex].foods[foodsIndex].food[0].detailMenId;
							 layer.open({
								type : 2,
								title : "菜谱编辑",
								area : [ MUI.SIZE_L, '400px' ],
								maxmin : true,
								content : [ '${path}/admin/pcMenuDetail/editForm-food?id='+id]
							}); 
							
						}
						
					}
					if(type=='material'){
						if(app.rows[rowsIndex].foods[foodsIndex].material[0] != undefined){
							//获取pc_menu_detail表的men_id
							var id=app.rows[rowsIndex].foods[foodsIndex].material[0].detailMenId;
							layer.open({
								type : 2,
								title : "原材料编辑",
								area : [ MUI.SIZE_L, '400px' ],
								maxmin : true,
								content : [ '${path}/admin/pcMenuDetail/editForm-material?id='+id]
							}); 
						}
					}
				},
				 showData: function () {
                     var _self = this;
                     var id=$("#menId").val();
                     $.ajax({
                         type: 'post',
                         url: '${path}/admin/pcMenuDetail/showDetail?id='+id,
                         success:function(data) {
                        	 layer.close(index);
                             _self.rows = data.rows;
                             var id=$("#menId").val();
                             $.ajax({
                                 type: 'post',
                                 url: '${path}/admin/pcMenuDetail/showElement?id='+id,
                                 success:function(data) {
                                     _self.elements = data.rows;
                                 }
                             });  
                         }
                     });
                 }
		
			} 
		})
		
	app.showData();
	//导出菜谱表
 	function exportMenu(){
 		var id=$("#menId").val();
 		window.location.href="${path}/admin/pcMenuDetail/exportMenu?id="+id;
 		layer.msg("导出成功", {
					icon : 1,time:1000
				});
 	}
 	//导出采购单
 	function exportBuy(){
 		var id=$("#menId").val();
 		window.location.href="${path}/admin/pcMenuDetail/exportBuy?id="+id;
 		layer.msg("导出成功", {
			icon : 1,time:1000
		});
 	} 
		
	</script>
</body>
</html>
